import {defineComponent, reactive, ref} from "vue";
import style from "@/page/portal/mine/comp/css/collect.module.css";
import style1 from "./css/info.module.css"
import {userStore} from "@/stores/user";
import {storeToRefs} from "pinia";
import {ElMessage} from "element-plus";
export default defineComponent({
    setup(){
        const user_store = userStore()
        const {userInfo} = storeToRefs(user_store)
        const nickName = ref('')
        const visible = ref(false)
        const isView = ref(true)
        const formRef = ref(null)
        const formInput = reactive({
            money:0,
            bao:""
        })
        user_store.getInfo()

        const rules = {
            // 金额大于0
            money: [
                {required: true, message: '请输入期望金额', trigger: 'blur'},
                {type: 'number', message: '请输入数字值', trigger: 'blur'},
                {
                    validator: (rule, value, callback) => {
                        if (value <= 0) {
                            callback(new Error('金额必须大于0'));
                        } else {
                            callback();
                        }
                    }
                }
            ],
            bao:{
                required: true, message: '请输入支付宝账号', trigger: 'blur'
            }
        }
        const changeNickName = () => {
            isView.value = !isView.value
            nickName.value = userInfo.value.nick_name
        }

        const handleSave = async () => {
            if(!nickName.value) return ElMessage.error('昵称不能为空')
            const {code} = await user_store.updateUser({nick_name: nickName.value})
            if(code === 0){
                isView.value = true
                ElMessage.success('修改成功')
                user_store.getInfo()
            }
        }

        // 提现
        const handeSave = () => {
            formRef.value.validate(async (valid) => {
                if (valid) {
                    const {code} = await user_store.withdraw(formInput)
                    if(code === 0){
                        ElMessage.success('提现成功')
                        visible.value = false
                        user_store.getInfo()
                        formRef.value.resetFields()
                    }
                }
            })
        }


        return ()=>{
            return <>
                <div className={style.title}>个人资料</div>
                   <div className={style1.info_box}>
                       <p>账号：{userInfo.value.user_name}</p>
                       <p>
                           {isView.value ?
                               <><span className = {style1.nick_name}>昵称：{userInfo.value.nick_name}</span>
                                    <el-button size={'small'} onclick={() => changeNickName()}>编辑
                                </el-button>
                               </>
                               :
                               <>
                                   <el-input style={{width:'200px',marginRight:'10px'}} size={'small'} v-model={nickName.value} placeholder={'请输入昵称'}/>
                                   <el-button size={'small'} type="primary" onclick={() => handleSave()}>保存
                                   </el-button>
                                   <el-button size={'small'} type="primary" onclick={() => isView.value = true}>取消
                                   </el-button>
                               </>
                            }
                       </p>
                       <p>账户余额：{userInfo.value.money} <el-button size={'small'} onclick={() => visible.value = true}>提现
                       </el-button>
                       </p>

                       {/*弹窗*/}
                            <el-dialog
                                title="提现"
                                v-model={visible.value}
                                width="30%">
                            <el-form
                                model={formInput}
                                ref={formRef}
                                rules={rules}
                                label-width={'100px'}
                            >
                                <el-form-item label={'提现金额'} prop={'money'}>
                                    <el-input-number style={{width:'200px'}}
                                                     precision={2}
                                                     v-model={formInput.money}
                                                     placeholder="请输入提现金额"/>
                                </el-form-item>
                                <el-form-item label={'支付宝账号'} prop={'bao'}>
                                    <el-input style={{width:'200px'}}
                                                     v-model={formInput.bao}
                                                     placeholder="请输入支付宝账号"/>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" className="dialog-footer">
                                <el-button onClick = {()=>{visible.value = false}}>取 消</el-button>
                                <el-button type="primary" onClick = {handeSave}>确 定</el-button>
                            </span>
                        </el-dialog>
                   </div>
            </>
        }
    }
})